<template>
  <page-container :show="subData.buffer" @clickoverlay="subData.buffer = false">
    <view class="popups">
      <text class="popups-title">选择成员</text>
      <view class="member-view">
        <image src="/static/other/touxiang.svg" mode="widthFix"></image>
        <text>{{ name == "" ? "请选择就诊人" : name }}</text>
        <text @click="choosePatient">选择就诊人</text>
      </view>
      <view class="select-submit" @click="subMit">提交预约</view>
    </view>
  </page-container>
</template>

<script setup lang="ts">
// 1.引入基础模块
import { ref, defineProps } from 'vue'
import { reqResphy } from "@/serve/api"
import { resPhyType } from "@/types/index"
import { usePatient } from "@/store/index"
const store = usePatient()//仓库模块对象

let name = ref("")//定义就诊人姓名
let insertData: resPhyType = { phy_name: "", phy_time: "", patient_id: "" }//待提交数据

// 2.获取父传子数据
let submitData = defineProps(['subData'])
console.log(submitData)

// 3.选择就诊人（跳转到就诊人列表页面）
function choosePatient() {
  uni.navigateTo({ url: "../myPatient/myPatient" })
}

// 4.监听仓库数据的变化
store.$subscribe((mutations, state) => {
  // console.log('数据变了：', state.patientData)
  name.value = store.patientData.name
  submitData.subData.patient_id = store.patientData._id
  insertData = JSON.parse(JSON.stringify(submitData.subData))
  delete (insertData.buffer)//删新增数据的开关字段
  console.log('赋值后：', insertData)
})

// 5.提交预约
async function subMit() {
  try {
    await reqResphy(insertData)//提交数据
    submitData.subData.buffer = false//关闭弹窗
  } catch (error) {
    console.log(error)
  }
}

</script>

<style>
@import url('../common-style/nucleic-time.css');

.popups {
  height: 400rpx;
  width: 100%;
  background-color: #ffffff;
}
</style>